<template>
    <div class="bank-product-container">
        <div class="bank-product-text">金融产品列表:</div>
        <div class="bank-product-filter-container">
            <el-select :style="{'width': '450px', 'display': 'inline-block'}" v-model="filter.form">
                <el-option label="全部" value="all"/>
                <el-option v-for="(item, index) in form_select_list"  :label="item.name" :value="item.name"/>
            </el-select>
            <el-select :style="{'width': '450px', 'display': 'inline-block'}" v-model="filter.business">
                <el-option label="全部" value="all"/>
                <el-option v-for="(item, index) in business_select_list"  :label="item.name" :value="item.name"/>
            </el-select>
            <el-select :style="{'width': '450px', 'display': 'inline-block'}" v-model="filter.pool">
                <el-option label="全部" value="all"/>
                <el-option v-for="(item, index) in pool_select_list"  :label="item.name" :value="item.name"/>
            </el-select>
        </div>
        <el-button type="primary" @click="handleFilter" :style="{'marginTop': '20px'}">
            过滤
        </el-button>
        <el-table
            :style="{'marginTop': '20px'}"
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
        >
            <el-table-column
                align="center"
                type="index"
                width="180"
                label="序号"
            >
            </el-table-column>
            <el-table-column align="center" label="产品名称">
                <template slot-scope="scope">
                    {{ scope.row.title }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="投资形式">
                <template slot-scope="scope">
                    {{ scope.row.form }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="行业类别">
                <template slot-scope="scope">
                    {{ scope.row.business }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="信息池类别">
                <template slot-scope="scope">
                    {{ scope.row.pool }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="180">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleCheckDetail(scope.$index, scope.row)">
                        详情
                    </el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import {filterBankProduct, getMyBankProduct} from "../../api/bank-product";
    import {getMetaClassList} from "../../api/meta-class";

    export default {
        name: "my-bank-product",
        data() {
            return {
                listLoading: true,
                list: null,
                filter: {
                    form: 'all',
                    business: 'all',
                    pool: 'all',
                },
                form_select_list: [],
                business_select_list: [],
                pool_select_list: [],
            }
        },
        methods: {
            handleCheckDetail(index, row) {
                console.log(index)
                console.log(row)
                this.$router.push({path: '/bank-product-detail', query: {id: row.id}})
            },
            handleDelete(index, row) {
                console.log(index)
                console.log(row)
            },
            handleFilter() {
                filterBankProduct(this.filter).then(res => {
                    console.log(res)
                })
            }
        },
        mounted() {
            getMetaClassList({type: 'form'}).then(res => {
                this.form_select_list = res.data
            })
            getMetaClassList({type: 'business'}).then(res => {
                this.business_select_list = res.data
            })
            getMetaClassList({type: 'pool'}).then(res => {
                this.pool_select_list = res.data
            })
            filterBankProduct(this.filter).then(res => {
                this.list = res.data
                this.listLoading = false
            })
        }
    }
</script>

<style lang="scss" scoped>
    .bank-product {
        &-container {
            margin: 30px;
        }
        &-filter-container {
            display: flex;
            width: 100%;
            justify-content: space-between;
        }
        &-text {
            font-size: 36px;
            line-height: 46px;
            font-weight: 600;
            margin-bottom: 20px;
        }
    }
</style>
